import React from 'react'
import {DatePicker, Form, Tabs} from 'antd'
import DlButton from '../../common/components/download/DlButton'
import moment from "moment";

const TabPane = Tabs.TabPane
const {RangePicker} = DatePicker
const FormItem = Form.Item
const dateFormat = 'YYYY-MM-DD';

class Index extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      downloadParams: {
        startDate: moment().subtract(1,'days').format(dateFormat),
        endDate: moment().subtract(1,'days').format(dateFormat),
      }
    }
  }

  handelDateChange = (date, dateString) => {
    console.log(this.state);
    this.setState({
      downloadParams: {
        startDate: dateString[0],
        endDate: dateString[1],
      }
    }, () => {
      console.log(this.state);
    })

  }

  render() {
    return (
      <div>
        <Tabs
          defaultActiveKey='1'
          tabPosition='left'
        >
          <TabPane tab='Extension Report' key='1'>
            <div>
              <div style={{width: 200}}>
                <Form layout='vertical'>
                  <FormItem
                    label='Date'
                  >
                    <RangePicker defaultValue={[moment().subtract(1,'days'),moment().subtract(1,'days')]} onChange={this.handelDateChange}
                                 format={dateFormat}/>
                  </FormItem>
                  <FormItem>
                    <div style={{display: 'inline'}}>
                      <DlButton downloadParams={this.state.downloadParams}
                                downloadUrl='/finance/export/report/extension'/>
                    </div>
                  </FormItem>
                </Form>
              </div>
            </div>
          </TabPane>
        </Tabs>
      </div>
    )
  }
}

export default Index
